<template>
	<com-popup direction="bottom" :visible="visible" @hide="hide">
		<view class="popup-box" :style="{'background-color': skinColor.color_bg_2}" @touchmove.stop.prevent>
			<text class="fs-30 text-align-center" :style="{color: skinColor.color_3}">{{title}}</text>
			<input
			class="popup-box-input"
			v-model="inputValue"
			:style="{'background-color': skinColor.color_gap_1, 'color': skinColor.color_1}"
			placeholder="请输入自定义属性" type="text" :placeholder-style="'color:' + skinColor.color_3" @blur="isError = false" />
			<text class="fs-24 fr-error pl-20 pt-10 pr-20" v-if="isError">{{showErrorText}}</text>
			<view class="y-flex y-row mt-60">
				<com-button class="popup-box-btn y-flex-1"
				:bg-color="skinColor.color_3"
				:color="skinColor.color_3" radius="80rpx" size="30" plain :value="cancelText" @click="handleCancel"></com-button>
				<com-gap width="60rpx"></com-gap>
				<com-button class="popup-box-btn y-flex-1"  radius="80rpx" size="30" type="primary" :value="confirmText" @click="handleConfirm"></com-button>
			</view>
		</view>
	</com-popup>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	import { typeCall } from '@/assets/js/util.js'
	export default {
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			}
		},
		data () {
			return {
				visible: false,
				inputValue: '',
				title: '',
				confirmText: '',
				cancelText: '',
				errorText: '',//验证错误提示文字
				validator: null,//自定义验证方法
				isError: false,//验证状态
				showErrorText: '',//实际展示验证错误提示文字
				empty: false,
				success: null,
				fail: null,
				complete: null
			}
		},
		methods: {
			handleConfirm () {
				if ( this.validator ) {
					const valid = this.validator(this.inputValue)
					if ( typeCall(valid) == 'Error' ) {
						this.showErrorText = valid.replace('Error: ', '')
						this.isError = true
					} else {
						this.showErrorText = this.errorText
						this.isError = valid
					}
				} else {
					if ( !this.inputValue.toString() ) {
						this.isError = true
						this.showErrorText = this.errorText
						return
					}
				}
				const params = {confirm: true, detail: {value: this.inputValue}}
				this.success && this.success(params)
				this.complete && this.complete(params)
				this.visible = false
			},
			handleCancel () {
				const params = {confirm: false, detail: {value: this.inputValue}}
				this.success && this.success(params)
				this.complete && this.complete(params)
				this.visible = false
			},
			hide () {
				this.fail && this.fail()
				this.complete && this.complete()
				this.visible = false
				this.inputValue = ''
			},
			show ({title, content, confirmText, cancelText, errorText, validator, success, fail, complete}) {
				this.title = title || ''
				this.content = content || ''
				this.confirmText = confirmText || '确认'
				this.cancelText = cancelText || '取消'
				this.errorText = errorText || '不能输入空值'
				this.validator = validator
				this.success = success
				this.fail = fail
				this.complete = complete
				this.visible = true
			}
		}
	}
</script>

<style>
</style>